<template>
  <div class="monitor">
    <LeftNav subTitle="北京石景山泰然大厦"/>
    <div class="rightLayout">
      <!-- 监测动态 -->
      <MonitoringDynamics  :basePosition="basePosition" :deviceInfo="deviceInfo"  v-if="baseNavNumber==1 && isReady" />
      <!-- 实时观测 -->
      <RealTimeObservation :basePosition="basePosition" :deviceInfo="deviceInfo"  v-if="baseNavNumber==2 && isReady"  />
      <!-- 数据管理 -->
      <DataManage :basePosition="basePosition" v-if="baseNavNumber==3" />
      <!-- 入驻管理 -->
      <SettledManage :basePosition="basePosition" v-if="baseNavNumber==4" />
      <!-- 添加入驻 -->
      <AddSetted :basePosition="basePosition" v-if="baseNavNumber==5" />
    </div>

    <PopUp ref="popUp" />

   

  </div>
</template>

<script>
import Emitter from '../../../utils/emit'
import LeftNav from '@/components/LeftNav' ;
import PopUp from '../../../components/popUp.vue';

import MonitoringDynamics from './MonitoringDynamics.vue';
import RealTimeObservation from './RealTimeObservation.vue';
import DataManage from './DataManage.vue';
import SettledManage from './SettledManage.vue';
import AddSetted from './AddSetted.vue';
export default {
    components: {
        LeftNav ,
        MonitoringDynamics,
        RealTimeObservation,
        DataManage,
        SettledManage,
        AddSetted ,
        PopUp
    },
    data() {
        return {
            baseNavNumber : 1 ,
            basePosition : 1,
            deviceInfo:{} ,
            isReady:false ,
            dialogVisible: false
        }
    },
    created() {
      Emitter.on('changePage' , ( position , navNumber , obj )=> {
        this.isReady = true ;
        console.log(obj);
        this.basePosition = position ;
        this.baseNavNumber = navNumber ;
        this.deviceInfo = obj;
      } );
     
    },
    methods: {
      setPopData(obj,flag) {
         this.$refs.popUp &&this.$refs.popUp.setData(obj,flag) ;
      }

    },
    mounted() {
      window.MonitoringDynamics = this ;
    }
}
</script>

<style lang="scss" scoped>
.monitor {
  width: 100%;
  height: 100%;
  padding-top: 100px;
  display: flex;
  .rightLayout {
    width: 100%;
    margin-right: 44px;
    margin-left: 20px;
    height: calc(100vh - 130px);
    overflow-y: auto ;

    background-size: 100% 100%
  }
}
</style>